<template>
  <div class="main">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="我的合同" name="first">
        <div v-if="isContract == 0">
          <p class="location">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item><i class="el-icon-location-outline" /> &nbsp;&nbsp;&nbsp;当前位置</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/aggregation/contract-guard' }">劳动合同卫士</el-breadcrumb-item>
              <el-breadcrumb-item>我的合同</el-breadcrumb-item>
            </el-breadcrumb>
          </p>
          <div class="block block1" @click="goChild('1')">
            <p><img src="../../assets/contract/icon_zhuanyehetong@2x.png" alt=""></p>
            <p>从ComDoc数据库中预定义一个专业合同</p>
          </div>
          <div class="block block2" @click="goChild('2')">
            <p><img src="../../assets/contract/icon_yiyouhetong@2x.png" alt=""></p>
            <p>本地上传已有合同</p>
          </div>
          <div class="block block3" @click="goChild('3')">
            <p><img src="../../assets/contract/icon_kongbaiwenjian@2x.png" alt=""></p>
            <p>开始于空白文件</p>
          </div>
        </div>
        <!-- <predefined-contract v-else-if="isContract == 1" :change-contract="changeContract"></predefined-contract> -->
      </el-tab-pane>
      <el-tab-pane label="协同编辑" name="second"><collaborative-editing /></el-tab-pane>
      <el-tab-pane label="律师审查" name="third"><lawyer-review /></el-tab-pane>
      <el-tab-pane label="电子签署" name="fourth"><electronic-sign /></el-tab-pane>
      <el-tab-pane label="合同数字档案" name="five"><contract-files /></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import CollaborativeEditing from './collaborative-editing.vue'
import LawyerReview from './lawyer-review.vue'
import ContractFiles from './contract-files.vue'
// import PredefinedContract from './predefined-contract.vue'
import ElectronicSign from './electronic-sign.vue'
export default {
  components: { CollaborativeEditing, LawyerReview, ContractFiles, ElectronicSign },
  data() {
    return {
      activeName: 'first',
      isContract: 0
    }
  },
  methods: {
    goChild(val) {
      this.$router.push({ path: '/aggregation/predefined-contract', query: { type: val }})
    },
    changeContract(data) {
      this.isContract = data
    },
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style scoped>
.main{
  padding:20px;
  height: calc(100vh - 60px);
  width:100%;
}
/deep/.el-tabs__nav-scroll{
  height:58px;
  line-height: 58px;
  background:#fff;
  padding-left:40px;
}
/deep/.el-tabs__nav-wrap::after{
  height:0;
}
/deep/.el-tabs__item.is-active{
  color:#E21111;
}
/deep/.el-tabs__item{
  padding:0 30px;
}
/deep/.el-tabs__active-bar{
  background-color:#E21111;
}
/deep/.el-tabs__item:hover{
  color:#E21111;
}
/deep/.el-tabs__content{
  height: calc(100vh - 160px);
}
/deep/.el-tab-pane{
  height: calc(100vh - 160px);
  position:relative;
}
.block{
  width:350px;
  height:180px;
  display:inline-block;
  background:#fff;
  position:absolute;
}
.block > p{
  text-align: center;
}
.block > p > img{
  width:90px;
}
.block1{
 left:20%;
 top:19%;
}
.block2{
 left:60%;
 top:19%;
}
.block3{
 left:40%;
 top:58%;
}
/deep/.el-breadcrumb{
  color:#999;
  font-size:12px;
}
</style>
